<template>
  <div class="app-container">
    <template>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <!-- 添加或修改楼盘信息对话框 -->
          <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
            <el-form-item label="楼盘名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入楼盘名称" />
            </el-form-item>
            <el-form-item label="地址" prop="address">
              <el-input v-model="form.address" placeholder="请输入地址" />
            </el-form-item>
            <el-form-item label="省" prop="province">
              <el-select v-model="form.province" placeholder="请选择" @change="getShi(),getSubwayList()">
                <el-option v-for="sheng in shengList" :label="sheng.regionName" :value="sheng.regionId" />
              </el-select>
              <el-select v-model="form.city" placeholder="请选择" @change="getXian()">
                <el-option v-for="shi in shiList" :label="shi.regionName" :value="shi.regionId" />
              </el-select>
              <el-select v-model="form.county" placeholder="请选择" @change="getShangQuan()">
                <el-option v-for="xian in xianList" :label="xian.regionName" :value="xian.regionId" />
              </el-select>
            </el-form-item>
            <el-form-item label="商圈" prop="commercialArea">
              <el-checkbox-group v-model="commercialArea"  @change="shang()">
                <el-checkbox v-for="item in commercialAreaList" :label="item.id"  name="commercialArea" >{{item.name}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="地铁" prop="subway" >
              <el-checkbox-group v-model="subway" @change="di()">
                <el-checkbox v-for="a in subwayList" :label="a.id" name="subway">{{a.subway}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="建筑面积" prop="proportion">
              <el-input v-model="form.proportion" placeholder="请输入建筑面积" />
            </el-form-item>
            <el-form-item label="建筑类型" prop="buildingType" >
              <el-checkbox-group v-model="buildingType" @change="jian()">
                <el-checkbox v-for="item in buildingTypeList" :label="item.dictValue" :value="item.dictValue">{{item.dictLabel}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="社区类型" prop="communityType">
              <el-select v-model="form.communityType" placeholder="请选择">
                <el-option v-for="item in communityTypeList"  :label="item.dictLabel" :value="item.dictValue" />
              </el-select>
            </el-form-item>
            <el-form-item label="物业类型" prop="premisesType" >
              <el-checkbox-group v-model="premisesType"  @change="wu()">
                <el-checkbox v-for="item in premisesTypeList"  :label="item.dictValue" >{{item.dictLabel}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="楼盘特色" prop="configProperty">
              <el-checkbox-group v-model="configProperty"  @change="lou()">
                <el-checkbox v-for="item in remarkList" :label="item.id" name="configProperty">{{item.remark}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="容积率" prop="grossPlotRatio">
              <el-input v-model="form.grossPlotRatio" placeholder="请输入容积率" />
            </el-form-item>
            <el-form-item label="绿化率" prop="greenCoverage">
              <el-input v-model="form.greenCoverage" placeholder="请输入绿化率" />
            </el-form-item>
            <el-form-item label="楼栋数" prop="buildingCount">
              <el-input v-model="form.buildingCount" placeholder="请输入楼栋数" />
            </el-form-item>
            <el-form-item label="得房率" prop="efficiency">
              <el-input v-model="form.efficiency" placeholder="请输入得房率" />
            </el-form-item>
            <el-form-item label="开发商" prop="developer">
              <el-input v-model="form.developer" placeholder="请输入开发商" />
            </el-form-item>
            <el-form-item label="物业管理公司" prop="estate">
              <el-input v-model="form.estate" placeholder="请输入物业管理公司" />
            </el-form-item>
            <el-form-item label="楼盘简介" prop="introduce">
              <el-input v-model="form.introduce" placeholder="请输入楼盘简介" />
            </el-form-item>
            <el-col :span="24">
              <el-form-item label="周边配套" prop="peripheralFacilities">
                <el-button type="primary" @click="addzhoubian">增加</el-button>
                <div v-for="(item,index) in form.peripheralFacilities">
                  <el-row>
                    <el-col :span="10">
                      <el-form-item  label="标题">
                        <el-input v-model="item.title" autocomplete="off"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="10">
                      <el-form-item label="内容">
                        <el-input v-model="item.content" autocomplete="off"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="2">
                      <el-button type="danger" @click="deletezhoubian(index)">删除</el-button>
                    </el-col>
                  </el-row>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="交通情况" prop="trafficCondition">
                <el-button type="primary" @click="addjiaotong">增加</el-button>
                <div v-for="(item,index) in form.trafficCondition">
                  <el-row>
                    <el-col :span="10">
                      <el-form-item  label="标题">
                        <el-input v-model="item.title" autocomplete="off"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="10">
                      <el-form-item label="内容">
                        <el-input v-model="item.content" autocomplete="off"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="2">
                      <el-button type="danger" @click="deletejiaotong(index)">删除</el-button>
                    </el-col>
                  </el-row>
                </div>
              </el-form-item>
            </el-col>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="相册管理" name="second">
          <template>
            <div>
              <el-row :gutter="15">
                <el-form :model="form" size="medium" label-width="100px">
                  <div  style="width: 1000px;height: 100px">
                    <el-col :span="9">
                      <el-form-item label="户型图">
                        <el-upload
                          class="upload-demo"
                          :action=this.$picUrl
                          :on-success="handlesuccess1"
                          :on-preview="handlePreview1"
                          :on-remove="handleRemove1"
                          :before-remove="beforeRemove1"
                          multiple
                          v-model="form.field1">
                          <el-button size="small" icon="el-icon-upload" type="primary">点击上传</el-button>
                        </el-upload>
                      </el-form-item>
                    </el-col>
                    <el-col :span="9">
                      <el-form-item label="">
                        <el-button type="primary" icon="el-icon-search" @click="field1yulan" size="medium"> 预览 </el-button>
                      </el-form-item>
                    </el-col>
                  </div>
                  <div style="width: 1000px;height: 100px">
                    <el-col :span="9">
                      <el-form-item label="外景图">
                        <el-upload
                          class="upload-demo"
                          :action=this.$picUrl
                          :on-success="handlesuccess2"
                          :on-preview="handlePreview2"
                          :on-remove="handleRemove2"
                          :before-remove="beforeRemove2"
                          multiple>
                          <el-button size="small" icon="el-icon-upload" type="primary">点击上传</el-button>
                        </el-upload>
                      </el-form-item>
                    </el-col>
                    <el-col :span="9">
                      <el-form-item label="">
                        <el-button type="primary" icon="el-icon-search" @click="field2yulan" size="medium"> 预览 </el-button>
                      </el-form-item>
                    </el-col>
                  </div>
                  <div style="width: 1000px;height: 100px">
                    <el-col :span="9">
                      <el-form-item label="施工图">
                        <el-upload
                          class="upload-demo"
                          :action=this.$picUrl
                          :on-success="handlesuccess3"
                          :on-preview="handlePreview3"
                          :on-remove="handleRemove3"
                          :before-remove="beforeRemove3"
                          multiple>
                          <el-button size="small" icon="el-icon-upload" type="primary">点击上传</el-button>
                        </el-upload>
                      </el-form-item>
                    </el-col>
                    <el-col :span="9">
                      <el-form-item label="">
                        <el-button type="primary" icon="el-icon-search" @click="field3yulan" size="medium"> 预览 </el-button>
                      </el-form-item>
                    </el-col>
                  </div>
                  <div style="width: 1000px;height: 100px">
                    <el-col :span="9">
                      <el-form-item label="效果图">
                        <el-upload
                          class="upload-demo"
                          :action=this.$picUrl
                          :on-success="handlesuccess4"
                          :on-preview="handlePreview4"
                          :on-remove="handleRemove4"
                          :before-remove="beforeRemove4"
                          multiple>
                          <el-button size="small" icon="el-icon-upload" type="primary">点击上传</el-button>
                        </el-upload>
                      </el-form-item>
                    </el-col>
                    <el-col :span="9">
                      <el-form-item label="">
                        <el-button type="primary" icon="el-icon-search"  @click="field4yulan" size="medium"> 预览 </el-button>
                      </el-form-item>
                    </el-col>
                  </div>
                  <div style="width: 1000px;height: 100px">
                    <el-col :span="9">
                      <el-form-item label="首页图">
                        <el-upload
                          class="upload-demo"
                          :action=this.$picUrl
                          :on-success="handlesuccess5"
                          :on-preview="handlePreview5"
                          :on-remove="handleRemove5"
                          :before-remove="beforeRemove5"
                          multiple>
                          <el-button size="small" icon="el-icon-upload" type="primary">点击上传</el-button>
                        </el-upload>
                      </el-form-item>
                    </el-col>
                    <el-col :span="9">
                      <el-form-item label="">
                        <el-button type="primary" icon="el-icon-search"  @click="field5yulan" size="medium"> 预览 </el-button>
                      </el-form-item>
                    </el-col>
                  </div>
                </el-form>
              </el-row>
            </div>
          </template>
        </el-tab-pane>
      </el-tabs>
    </template>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
  </div>
</template>

<script>
import { listInfo, addInfo, updateInfo,shengList,subwayList,ShangQuanList,RemarkList,communityType,buildingType,premisesType,ByIdPremisesInfo } from "@/api/house/info";

export default {
  name: "Add",
  components: {
  },
  data() {
    return {
      abc:{id:null},
      activeName: 'first',
      communityType:[],
      communityTypeList:[],
      buildingType:[],
      buildingTypeList:[],
      premisesType:[],
      premisesTypeList:[],
      remarkList:[],
      configProperty:[],
      commercialAreaList:[],
      commercialArea:[],
      subwayList:[],
      subway:[],
      //省
      shengList:[],
      //市
      shiList:[],
      //县
      xianList:[],
      form: {peripheralFacilities:[],trafficCondition:[],field1:'',field2:'',field3:'',field4:'',field5:'',city:null,county:null},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
    this.getShengList();
    this.getRemarkList();
    this.getCommunityTypeList();
    this.getBuildingTypeList();
    this.getPremisesTypeList();

    //回显
    var id = this.$route.query.id

    if (id>0){
      ByIdPremisesInfo(id).then(res=>{
        //赋值
          this.form=res.data
          this.getShengList();
          this.getShi();
          this.getXian();
          this.getShangQuan(res.data.county)
          this.getSubwayList(res.data.province)
          this.commercialArea=res.data.shangquan
          this.subway=res.data.ditie
          this.buildingType=res.data.jianzhu
          this.premisesType=res.data.wuye
          this.configProperty=res.data.configProperty
          this.communityType = res.data.shequ
          console.log("楼盘特色"+res.data.configProperty)
      })
    }
  },
  methods: {
    a(id) {
      let a =id
      alert(a)
      ByIdPremisesInfo({id:a}).then(res=>{
        //赋值
        this.form=res.data
      })
    },
    shang() {
        this.form.shangquan=this.commercialArea
    },
    di() {
        this.form.ditie=this.subway
    },
    jian() {
      this.form.jianzhu=this.buildingType
    },
    wu() {
      this.form.wuye=this.premisesType
    },
    lou() {
      this.form.configProperty=this.configProperty
    },
    deletejiaotong(index){
      this.form.jiaotonglist.splice(index,1)
    },
    addjiaotong(){
      this.form.trafficCondition.push({
        title:'',
        content:''
      })
    },
    addzhoubian(){
      this.form.peripheralFacilities.push({
        title:'',
        content:''
      })
    },
    deletezhoubian(index){
      this.form.zhoubianlist.splice(index,1)
    },
    /*标签页的方法*/
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getCommunityTypeList() {
      let id=1;
      communityType({id:id}).then(res=>{
        console.log("================",res)
        this.communityTypeList=res.data.communityTypeList.data
      })
    },


    getBuildingTypeList() {
      let id=2;
      buildingType({id:id}).then(res=>{
        console.log(res)
        this.buildingTypeList=res.data.buildingTypeList.data
      })
    },
    getPremisesTypeList() {
      let id=3;
      premisesType({id:id}).then(res=>{
        console.log(res)
        this.premisesTypeList=res.data.premisesTypeList.data
      })
    },
    getRemarkList() {
      RemarkList().then(res=>{
        console.log(res)
        this.remarkList=res.data
      })
    },
    /*获取省的集合*/
    getShengList() {
        let parentId=1;
        shengList({parentId:parentId}).then(res=>{
          console.log(res)
          this.shengList=res.data
          /*this.shiList=[]
          this.xianList=[]
          this.form.city=null
          this.form.county=null*/
        })
    },
    getShi() {
      let parentId=this.form.province;
      shengList({parentId:parentId}).then(res=>{
        console.log(res)
        this.shiList=res.data
        /*this.xianList=[]
        this.form.county=null*/
      })
    },
    getXian() {
      let parentId=this.form.city;
      shengList({parentId:parentId}).then(res=>{
        console.log(res)
        this.xianList=res.data
      })
    },
    getShangQuan() {
      let county=this.form.county;
      ShangQuanList({county:county}).then(res=>{
        console.log(res)
        this.commercialAreaList=res.data
      })
    },
    getSubwayList() {
      let city=this.form.province;
      subwayList({city:city}).then(res=>{
          this.subwayList=res.data
      })
    },
    /** 查询楼盘信息列表 */
    getList() {
      this.loading = true;
      listInfo(this.queryParams).then(response => {
        this.infoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        outsideId: null,
        name: null,
        province: null,
        city: null,
        county: null,
        commercialArea: null,
        subway: null,
        address: null,
        proportion: null,
        grossPlotRatio: null,
        greenCoverage: null,
        buildingCount: null,
        efficiency: null,
        developer: null,
        estate: null,
        introduce: null,
        communityType: null,
        buildingType: null,
        premisesType: null,
        updateTime: null,
        longItude: null,
        latItude: null
      };
      this.resetForm("form");
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加楼盘信息";
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
      if (valid) {
        if (this.form.id != null) {
          addInfo(this.form).then(response => {
            this.msgSuccess("修改成功");
            this.open = false;
            this.getList();
          });
        } else {
          addInfo(this.form).then(response => {
            this.msgSuccess("新增成功");
            this.open = false;
            this.$router.push("/house/list")
          });
        }
      }
      });
    },
    handlesuccess1(file){
      console.log("....",file);
      this.form.field1=file
      console.log("....",this.form.field1);
    },
    handleRemove1(file) {
      console.log("::::",file);
    },
    handlePreview1(file) {
      console.log("1111",file);
    },
    beforeRemove1(file) {
      return this.$confirm(`确定移除${ file.name }'？`);
    },
    handlesuccess2(file){
      console.log("....",file);
      this.form.field2=file
      console.log("....",this.form.field2);
    },
    handleRemove2(file) {
      console.log("::::",file);
    },
    handlePreview2(file) {
      console.log("1111",file);
    },
    beforeRemove2(file) {
      return this.$confirm(`确定移除${ file.name }'？`);
    },
    handlesuccess3(file){
      console.log("....",file);
      this.form.field3=file
      console.log("....",this.form.field3);
    },
    handleRemove3(file) {
      console.log("::::",file);
    },
    handlePreview3(file) {
      console.log("1111",file);
    },
    beforeRemove3(file) {
      return this.$confirm(`确定移除${ file.name }'？`);
    },
    handlesuccess4(file){
      console.log("....",file);
      this.form.field4=file
      console.log("....",this.form.field4);
    },
    handleRemove4(file) {
      console.log("::::",file);
    },
    handlePreview4(file) {
      console.log("1111",file);
    },
    beforeRemove4(file) {
      return this.$confirm(`确定移除${ file.name }'？`);
    },
    handlesuccess5(file){
      console.log("....",file);
      this.form.field5=file
      console.log("....",this.form.field5);
    },
    handleRemove5(file) {
      console.log("::::",file);
    },
    handlePreview5(file) {
      console.log("1111",file);
    },
    beforeRemove5(file) {
      return this.$confirm(`确定移除${ file.name }'？`);
    },
    field1yulan(){
      var url = this.form.field1 //要预览文件的访问地址
      window.open(url);
    },
    field2yulan(){
      var url = this.form.field2
      window.open(url);
    },
    field3yulan(){
      var url = this.form.field3
      window.open(url);
    },
    field4yulan(){
      var url = this.form.field4
      window.open(url);
    },
    field5yulan(){
      var url = this.form.field5
      window.open(url);

    },
  }
};
</script>
